<template>
    <div class="app-container">
        <!-- 查询条件开始 -->
        <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="98px">
            <el-form-item label="患者姓名" prop="name">
                <el-input v-model="queryParams.name" placeholder="请输入患者姓名" clearable size="small" style="width:180px"/>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="queryParams.phone" placeholder="请输入手机号" clearable size="small" style="width:180px"/>
            </el-form-item>
            <el-form-item label="身份证号" prop="idCard">
                <el-input v-model="queryParams.idCard" placeholder="请输身份证号" clearable size="small" style="width:180px"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery()">搜索</el-button>
                <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 查询条件结束 -->
        <!-- 表格工具按钮开始 -->
        <el-row :gutter="10" style="margin-bottom: 8px;">
            <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-plus" size="mini" :disabled="single" @click="handleViewFile">查看档案</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" icon="el-icon-edit" size="mini" :disabled="single" @click="handleViewCareHistory">查看就诊病例</el-button>
            </el-col>
        </el-row>
        <!-- 表格工具按钮结束 -->

        <!-- 数据表格开始 -->
        <el-table v-loading="loading" border :data="patientTableList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />

            <el-table-column label="姓名" align="center" prop="name" />
            <el-table-column label="电话" align="center" prop="phone" />
            <el-table-column label="身份证号" align="center" prop="idCard" />
            <el-table-column label="出生年月" align="center" prop="birthday">
                <template slot-scope="scope">
                    <span>{{ scope.row.birthday.substring(0,10) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="年龄" align="center" prop="phone" :formatter="calculateAgeFormatter" />
            <el-table-column label="性别" prop="sex" align="center" :formatter="sexFormatter" />
            <el-table-column label="信息状态" prop="isFinal" align="center" :formatter="isFinalFormatter" />
            <el-table-column label="创建时间" align="center" prop="createTime" />
        </el-table>
        <!-- 数据表格结束 -->
        <!-- 分页控件开始 -->
        <el-pagination
                v-show="total"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
        <!-- 分页控件结束 -->

        <!-- 查看患者档案弹出层开始 -->
        <el-dialog :title="title" :visible.sync="fileOpen" width="1000px" center append-to-body>
            <el-form label-position="left" label-width="120px" inline class="demo-table-expand">
                <el-form-item label="ID:"><span v-text="patientObj.patientId" /></el-form-item>
                <el-form-item label="姓名:"><span v-text="patientObj.name" /></el-form-item>
                <el-form-item label="身份证号:"><span v-text="patientObj.idCard" /></el-form-item>
                <el-form-item label="电话:"><span v-text="patientObj.phone" /></el-form-item>
                <el-form-item label="患者性别:"><span v-text="patientObj.sex" /></el-form-item>
                <el-form-item label="出生年月:"><span v-text="patientObj.birthday" /></el-form-item>
                <el-form-item label="地址信息:"><span v-text="patientObj.address" /></el-form-item>
                <el-form-item label="过敏信息:"><span v-text="patientObj.allergyInfo" /></el-form-item>
                <el-form-item label="是否完善信息:"><span v-text="patientObj.isFinal" /></el-form-item>
                <el-form-item label="最后登录ip:"><span v-text="patientObj.lastLoginIp" /></el-form-item>
                <el-form-item label="最后登录时间:"><span v-text="patientObj.lastLoginTime" /></el-form-item>
                <el-form-item label="创建时间:"><span v-text="patientObj.createTime" /></el-form-item>
                <el-form-item label="更新时间:"><span v-text="patientObj.updateTime" /></el-form-item>
                <el-form-item label="紧急联系人:"><span v-text="patientFileObj.emergencyContactName" /></el-form-item>
                <el-form-item label="紧急联系人电话:"><span v-text="patientFileObj.emergencyContactPhone" /></el-form-item>
                <el-form-item label="关系:"><span v-text="patientFileObj.emergencyContactRelation" /></el-form-item>
                <el-form-item label="左耳听力:"><span v-text="patientFileObj.leftEarHearing" /></el-form-item>
                <el-form-item label="右耳听力:"><span v-text="patientFileObj.rightEarHearing" /></el-form-item>
                <el-form-item label="左眼视力:"><span v-text="patientFileObj.leftVision" /></el-form-item>
                <el-form-item label="右眼视力:"><span v-text="patientFileObj.rightVision" /></el-form-item>
                <el-form-item label="身高:"><span v-text="patientFileObj.height" /></el-form-item>
                <el-form-item label="体重:"><span v-text="patientFileObj.weight" /></el-form-item>
                <el-form-item label="血型:"><span v-text="patientFileObj.bloodType" /></el-form-item>
                <el-form-item label="个人史:"><span v-text="patientFileObj.personalInfo" /></el-form-item>
                <el-form-item label="家族史:"><span v-text="patientFileObj.familyInfo" /></el-form-item>
                <el-form-item label="档案创建时间:"><span v-text="patientFileObj.createTime" /></el-form-item>
                <el-form-item label="档案更新时间:"><span v-text="patientFileObj.updateTime" /></el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button @click="cancelFile">取 消</el-button>
      </span>
        </el-dialog>
        <!-- 查看患者档案弹出层结束 -->

        <!-- 患者病历的弹出层开始 -->
        <el-dialog :title="title" :visible.sync="careHistoryOpen" width="1000px" center append-to-body>
            <el-form label-position="left" label-width="120px" inline class="demo-table-expand">
                <el-card><el-form-item label="ID:"><span v-text="patientObj.patientId" /></el-form-item>
                    <el-form-item label="姓名:"><span v-text="patientObj.name" /></el-form-item>
                    <el-form-item label="身份证号:"><span v-text="patientObj.idCard" /></el-form-item>
                    <el-form-item label="电话:"><span v-text="patientObj.phone" /></el-form-item>
                </el-card>
            </el-form>
            <el-card style="margin-top:3px">
                <div v-if="allPatientMsg">
                    <el-collapse v-model="activeName"  >
                        <el-collapse-item v-for="item in allPatientMsg"  :name="item.deptName">
                            <template slot="title">科室:【{{ item.deptName }}】就诊时间:【{{ item.careTime }}】</template>
                            <div>主诉:{{ item.caseTitle }}</div>
                            <div>诊断信息:{{ item.caseResult }}</div>
                            <div>医生建议:{{ item.doctorTips }}</div>
                            <div>备注:{{ item.remark }}</div>
<!--                            {{item.careOrderList}}-->
<!--                            当前挂号单历史处方开始-->
                            <el-collapse v-show="item.careOrderList" accordion>
                                <el-collapse-item v-for="(it,i) in item.careOrderList" :key="i">
                                    <template slot="title">
                                        【 {{ it.coType==='0'?'药品处方':'检查处方' }}】【{{ i+1 }}】 <span>【处方总额】:￥{{ it.allAmount }}</span>
                                    </template>

                                    <el-table v-loading="loading" border :data="it.careOrderItemList">
                                        <el-table-column label="序号" align="center" type="index" width="50" />
                                        <el-table-column :label="it.coType==='0'?'药品名称':'项目名称'" align="center" prop="itemName" />
                                        <el-table-column label="数量" align="center" prop="num" />
                                        <el-table-column label="单价(元)" align="center" prop="price" />
                                        <el-table-column label="金额(元)" align="center" prop="amount" />
                                        <el-table-column label="备注" prop="remark" align="center" />
                                        <el-table-column label="状态" prop="status" align="center" :formatter="statusFormatter" />
                                    </el-table>
                                </el-collapse-item>
                            </el-collapse>
                        </el-collapse-item>
                    </el-collapse>
                </div>
                <div v-else style="text-align:center">暂无就诊数据</div>
            </el-card>
            <span slot="footer" class="dialog-footer"><el-button @click="cancelHistory">取 消</el-button></span>
        </el-dialog>
        <!-- 患者病历的弹出层结束 -->
    </div>
</template>

<script>
    export default {
        name: "patient",
        // 定义页面数据
        data() {
            return {
                activeName: '1',
                // 是否启用遮罩层
                loading: false,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 分页数据总条数

                total: 0,
                currentPage:1,
                pageSize:5,



                // 字典表格数据
                patientTableList: [],
                // 弹出层标题
                title: '',
                // 是否显示档案弹出层
                fileOpen: false,
                // 性别数据字典
                sexOptions: [],
                // 完善信息状态
                FinalOptions: [],
                // 查询参数
                queryParams: {

                },
                // 患者信息
                patientObj: {},
                // 档案信息
                patientFileObj: {},
                // 是否打开病历弹出层
                careHistoryOpen: false,
                // 患者所有就诊信息
                allPatientMsg: [],
                // 订单状态
                statusOptions: []
            }
        },
        methods:{

            initstatus() {
                this.$http.get("system/api/dict/data/findByType/his_order_details_status").then(result => {
                    this.statusOptions = result.data.data;
                })
            },
            // 解析 加载挂号类型
            statusFormatter(row) {
                let v = row.status;
                return this.formatDict2(this.statusOptions, v);
            },

            // 查询表格数据
            getPatientList() {
                this.$http.post("/doctor/patient/searchPatient/"+this.currentPage+"/"+this.pageSize,this.queryParams).then(result =>{
                    this.patientTableList = result.data.data.records;
                    this.total=result.data.data.total;
                })
            },
            // 分页pageSize变化时触发
            handleSizeChange(val) {
                this.pageSize = val
                // 重新查询
                this.getPatientList()
            },
            // 点击上一页  下一页，跳转到哪一页面时触发
            handleCurrentChange(val) {
                this.currentPage = val
                // 重新查询
                this.getPatientList()
            },

            //初始化性别字典
            initSex(){
                this.$http.get("/system/api/dict/data/findByType/sys_user_sex").then(result=>{
                    this.sexOptions=result.data.data;
                })
            },
            //
            sexFormatter(row){
                let sex = row.sex;
                return this.formatDict2(this.sexOptions,sex);
            },
            //查询信息状态
            initFinal(row) {
                this.$http.get("/system/api/dict/data/findByType/his_patient_msg_final").then(result=>{
                    this.FinalOptions=result.data.data;
                })
            },
            //解析状态
            isFinalFormatter(row){
                let his_patient_msg_final = row.isFinal;
                return this.formatDict2(this.FinalOptions,his_patient_msg_final);

            },

            // 根据出生年月计算年龄
            calculateAgeFormatter(row) {
                return this.getAge(row.birthday.substring(0, 10))
            },

            // 条件查询
            handleQuery() {
                //
                //alert(JSON.stringify(this.queryParams))
                this.getPatientList()
            },
            // 重置查询条件
            resetQuery() {
                this.queryParams={};
                this.getPatientList()
            },
            // 数据表格的多选择框选择时触发
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.patientId)
                //alert(ids)
                console.log(this.ids)
                this.single = selection.length !== 1
                this.multiple = !selection.length
            },
            // 查询患者档案
            handleViewFile() {
                const patientId = this.ids[0]
                this.fileOpen = true
                this.title = '查询患者档案信息'
                this.patientFileObj = {}
                this.patientObj = {}
                // 查询患者信息
                this.$http.get("/doctor/patient/getByPatientId/"+patientId).then(result=>{
                    this.patientObj=result.data.data
                    const sex = this.patientObj.sex
                    const isFinal = this.patientObj.isFinal
                    this.patientObj.sex = (sex === '0' ? '男' : sex === '1' ? '女' : '未知')
                    this.patientObj.isFinal = isFinal === '0' ? '未完善' : '已完善'
                })
                // 查询患者档案信息
                this.$http.get("/doctor/patientfile/getByPatientFileId/"+patientId).then(result=>{
                    if(result.data.data !== null){
                        this.patientFileObj=result.data.data
                    }

                })
            },
            // 取消
            cancelFile() {
                this.fileOpen = false
                this.title = ''
            },

            // 查询患者就诊信息
            handleViewCareHistory(row) {
                const patientId = this.ids[0]
                this.careHistoryOpen = true
                this.title = '查询患者病历信息'
                this.patientObj = {}
                // 查询患者信息
                this.$http.get("/doctor/patient/getByPatientId/"+patientId).then(result=>{
                    this.patientObj=result.data.data
                })
                // 查询患者的就诊信息及检查
                this.$http.post("/doctor/carehistory/getPatientAllMessageByPatientId/"+patientId).then(result=>{
                    //if (result.data.data !== null){
                    //alert(JSON.stringify(result.data.data))
                    console.log(JSON.stringify(result.data.data))
                        this.allPatientMsg=result.data.data
                    })

            },
            // 关闭就诊信息的弹出层
            cancelHistory() {
                this.careHistoryOpen = false
                this.allPatientMsg = []
            }
        },

        created() {
            this.getPatientList();
            //加载性别
            this.initSex();
            //加载状态
            this.initFinal();
            this.initstatus();
        }
    }
</script>

<style scoped>
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>
